<template>
	<div class="wrap">
		<div class="orderForm">
			<p class="ddnumber">订单编号：156569584694760319690000</p>
			<p class="dddate">订单状态: </p>
			<p class="ddshop">待付款</p>
			<button class="ljfu">立即支付</button>
			<button class="qxfu">取消订单</button>
		</div>
		<!---->
		<ul class="zhifu-style">
			<li class="bao-style">支付方式:&nbsp;支付宝</li>
			<li>支付流水号:&nbsp;4643196461647896166</li>
			<li>下单时间:&nbsp;2017-12-30 16:11:38</li>
			<li>支付时间</li>
			<li>发货时间</li>
			<li>收货时间</li>
			<li>取消时间</li>
			<li>申请退款时间</li>
			<li>退款原因</li>
			<li>退款时间</li>
			<li>订单备注:&nbsp;希望包装的严实一些，不要有破损情况，谢谢</li>
		</ul>
		<p class="shoumsg">收货人信息</p>
		<ul class="zhifu-style1">
			<li class="bao-style">收货人姓名 :&nbsp; 王敏敏</li>
			<li>地址 :&nbsp; 4643196461647896166</li>
			<li>联系方式 :&nbsp; 手机：15035689566/固定电话：010-12548756</li>
		</ul>
		<p class="shoumsg">发票信息</p>
		<ul class="zhifu-style2">
			<li class="bao-style">发票抬头:&nbsp; 北京嘉和影业有限公司</li>
			<li>发票内容 :&nbsp; 明细</li>
		</ul>
		<p class="shoumsg">物流信息</p>
		<ul class="zhifu-style2">
			<li class="bao-style">联系人：&nbsp; 张小哥</li>
			<li>联系方式：&nbsp;13995684562</li>
		</ul>
		<p class="shoumsg">卖家信息</p>
		<ul class="zhifu-style1">
			<li class="bao-style"> 店铺名称 :&nbsp; 海澜之家旗舰店</li>
			<li>真实姓名 :&nbsp; 倚天剑</li>
			<li>联系电话 :&nbsp; 0512-25664952</li>
		</ul>
		<div class="shuiguoShop">
			<p class="guoguo">
				爱果果水果店
			</p>
			<p class="guige">
				规格		
			</p>
			<p class="price-dan">
				单价
			</p>
			<p class="nmb">数量</p>
			<p class="money">金额</p>
		</div>
		<div class="dianpu">
			<div v-for="siliu in 3" class="one">
				<img src="../../assets/img/geren/caomei.png"/>
				<p class="mengzi">云南蒙自石榴 8个装</p>
				<p class="eigtht">8个装</p>
				<p class="fivesix">¥569</p>
				<p class="numone">1</p>
				<p class="fivesixmoney">¥569</p>
			</div>
			<p class="zong">¥2977</p>
			<p class="price-zong" >实付金额:</p>
			<button id="on">立即支付</button>
			<router-link to="/dingdan01"><button id="off">取消订单</button></router-link>
		</div>
	</div>
</template>

<script>
</script>

<style scoped="scoped">
	.wrap {
		width: 1085px;
		float: left;
		/*height: 625px;*/
		margin-left: 20px;
		border: 1px solid #e7e7e7;
		margin-bottom: 40px;
	}
	
	.orderForm {
		width: 1044px;
		height: 46px;
		margin-left: 22px;
	}
	
	.orderForm p {
		line-height: 46px;
		float: left;
		font-size: 16px;
	}
	
	.ddnumber {
		margin-left: 21px;
	}
	
	.dddate {
		margin-left: 170px;
	}
	
	.ddshop {
		color: #f08200;
	}
	
	.ljfu {
		width: 90px;
		height: 30px;
		background: #498e3d;
		font-size: 16px;
		color: white;
		margin-left: 200px;
		margin-top: 10px;
	}
	
	.qxfu {
		width: 90px;
		height: 30px;
		font-size: 16px;
		color: white;
		background: #999999;
		margin-left: 40px;
	}
	
	.zhifu-style {
		width: 1046px;
		height: 420px;
		background: #f9f9f9;
		margin: 0 auto;
	}
	
	.zhifu-style li,
	.zhifu-style1 li,
	.zhifu-style2 li {
		font-size: 16px;
		margin-left: 21px;
		padding-top: 15px;
	}
	
	.bao-style {
		padding-top: 21px;
	}
	
	.shoumsg {
		font-size: 16px;
		color: #498e3d;
		margin-left: 21px;
		padding: 19px;
	}
	
	.zhifu-style1 {
		width: 1046px;
		height: 127px;
		background: #f9f9f9;
		margin: 0 auto;
	}
	
	.zhifu-style2 {
		width: 1046px;
		height: 93px;
		background: #f9f9f9;
		margin: 0 auto;
	}
	.shuiguoShop{
		width: 1044px;
		height: 46px;
		background: #f2f2f2;
		margin: 0 auto;
		margin-top:21px ;
	}
	.shuiguoShop p{
		float: left;
		font-size: 16px;
		line-height: 46px;
	}
	.guoguo{
		margin-left: 20px;
	}
	.guige{
		margin-left:310px ;
	}
	.price-dan{
		margin-left: 145px;
	}
	.nmb,.money{
		margin-left: 145px;
	}
	.one{
		width: 1044px;
		height: 100px;
		margin: 0 auto;
		/*border: 1px solid red;*/
		margin-top: 21px;
		border-bottom: 1px solid #A9A9A9;
	}
	.one img{
		float: left;
	}
	.one p{
		line-height: 80px;
		font-size: 16px;
	
	}
	.one .mengzi{
		float: left;
			margin-left: 20px;
	}
	.eigtht{
		float: left;
		margin-left: 186px;
	}
	.fivesix{
		float: left;
		margin-left: 130px;
	}
	.numone{
		float: left;
		margin-left: 160px;
	}
	.fivesixmoney{
	float: left;
		margin-left: 155px;
	}
	.price-zong,.zong{
		font-size: 18px;
		float: right;
		margin-top: 40px;
	}
	.zong{
		color: #F08200;
		margin-right: 21px;
		margin-left: 21px;
		margin-top: 43px;
	}
	#off,#on{
		width: 150px;
		height: 50px;
		color: white;
		border-radius: 5px;
		margin-bottom: 41px;
	}
	#off{
		float: right;
		margin-top: 100px;
		margin-right: 20px;
		background: #999999;
	}
	#on{
		float: right;
		background: #F08200;
		margin-top: 100px;
		margin-right: -150px;
	}
</style>